<template>
  <div>
    <p>定时任务日志</p>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-row>
            <el-form-item label="任务名称：">
              <el-input
                  v-model="form.jobName"
                  placeholder="请输入任务名称">
              </el-input>
            </el-form-item>
            <el-form-item label="任务组名：">
              <el-input
                  v-model="form.jobGroup"
                  placeholder="请输入任务组名">
              </el-input>
            </el-form-item>
            <el-form-item label="操作日期：" style="white-space: nowrap;">
              <el-date-picker
                  v-model="dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>

            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-col>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark"></div>
        <el-table
            :data="tableData"
            stripe
            style="width: 100%"
        >
          <el-table-column
              prop="jobName"
              label="任务名称"
              width="180">
          </el-table-column>
          <el-table-column
              prop="jobGroup"
              label="任务组名"
              width="180">
          </el-table-column>
          <el-table-column
              prop="jobMessage"
              label="日志信息">
          </el-table-column>
          <el-table-column
              prop="status"
              label="执行状态">
            <template v-slot="scope">
              <el-switch
                  v-model="scope.row.status"
                  active-value="0"
                  inactive-value="1"
                  active-color="#13ce66"
                  @change="setStatus(scope.row)"
                  inactive-color="#ff4949">
              </el-switch>
            </template>

          </el-table-column>
          <el-table-column
              prop="exceptionInfo"
              label="异常信息">
          </el-table-column>
          <el-table-column

              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              label="操作">
            <template v-slot="scope">
              <el-button type="danger" v-if="$store.state.authorities.includes('monitor:log:delete')" @click="deleteSchedule(scope.row.jobLogId)" icon="el-icon-delete" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[8, 10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
import { isEmpty } from 'lodash'

export default {
  name: "ScheduleLogPage",
  data() {
    return {
      pageSize: 8,
      total: 0,
      currentPage: 1,
      DateTime: '',
      form: {
        jobName: "",
        jobGroup: "",
      },
      tableData: [],
      // 根据时间搜索日志
      dateRange: [],
    }
  },
  created() {
    this.showData();

  },
  methods: {
    handleSizeChange(i) {
      this.pageSize = i;
      this.currentPage = 1;//一旦页面大小发生变化，必须回第一页
      this.showData();
    },
    handleCurrentChange(i) {
      this.currentPage = i;
      this.showData();
    },

    deleteSchedule(jobLogId) {
      this.$confirm('此操作将永久删除这条数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request("jobLog?id=" + jobLogId, "delete")
        setTimeout(() => {
          this.showData()
        }, 1000)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      })
    },
    //时间格式化数据封装
    formatDate(dateString) {
      // 解析日期字符串为Date对象
      const date = new Date(dateString);

      // 用于补零的函数
      function pad(number) {
        return number < 10 ? '0' + number : number;
      }

      // 构建日期格式
      const year = date.getFullYear();
      const month = pad(date.getMonth() + 1); // 月份是从0开始的
      const day = pad(date.getDate());
      const hours = pad(date.getHours());
      const minutes = pad(date.getMinutes());
      const seconds = pad(date.getSeconds());
      // 返回格式化的日期字符串
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    async search() {
      // this.showData();
      let dataTime = []
      //对搜索时间进行格式化
      console.info(this.dateRange)
      if (!isEmpty(this.dateRange)) {
        this.dateRange.forEach(item => {
          dataTime.push([this.formatDate(item)])
        })
      }
      console.info(dataTime)
      let data = await request(`jobLog?&size=${this.pageSize}&page=${this.currentPage}&jobName=${this.form.jobName}&jobGroup=${this.form.jobGroup}&dataTime=${dataTime}&orderBy=create_time DESC`);
      this.tableData = data.list;
      this.total = data.total;

      if (this.dateRange == null) {
        this.showData();
      }
      this.showData();
    },

    async showData() {
      let dataTime = []
      if (!isEmpty(this.dateRange)) {
        this.dateRange.forEach(item => {
          dataTime.push([this.formatDate(item)])
        })
      }
      let data = await request(`jobLog?&size=${this.pageSize}&page=${this.currentPage}&jobName=${this.form.jobName}&jobGroup=${this.form.jobGroup}&dataTime=${dataTime}&orderBy=create_time DESC`);
      this.tableData = data.list;
      console.info(this.tableData)
      this.total = data.total;
    },
    setStatus({id, status}) {
      request("jobLog", "put", {id, status}).then(() => {
        this.$message.success("操作成功")
        //this.$router.push("/ScheduleLogPage")
      })
    },

  },

}
</script>

<style scoped>

</style>